<script setup lang="ts">
import HostSelect from "@/components/HostSelect.vue";
import type { Forward } from "@/stores/master/types";
import { getBy } from "@/utils/array";
import { setup } from "@/utils/setup";
import { Add } from "@vicons/ionicons5";
import {
  NButton,
  NButtonGroup,
  NCard,
  NCollapse,
  NCollapseItem,
  NDynamicInput,
  NEmpty,
  NIcon,
  NInput,
  NInputGroup,
  NInputGroupLabel,
} from "naive-ui";
import { v4 as uuidv4 } from "uuid";

const { configStore, router } = setup();

function createFroward(): Forward {
  return {
    id: uuidv4(),
    from: { host: "", type: "custom", custom: { ip: "127.0.0.1", port: 80 } },
    to: { host: "", port: 0 },
  };
}

function title(forward: Forward) {
  const fromHost = getBy(configStore.config!.hosts, "id", forward.from.host);
  const toHost = getBy(configStore.config!.hosts, "id", forward.to.host);
  const fromPort =
    forward.from.type === "ssh"
      ? 0
      : forward.from.type === "custom"
      ? forward.from.custom.port
      : 0;
  return `${fromHost?.name}:${fromPort}`;
}
</script>

<template>
  <div style="padding: 16px 32px 16px 16px">
    <NDynamicInput v-if="configStore.config === undefined" :max="0" />
    <NDynamicInput
      v-else
      v-model:value="configStore.config.forwards"
      :on-create="createFroward"
    >
      <template #default="{ value, index }: { value: Forward, index: number }">
        <NCollapse arrow-placement="right">
          <NCollapseItem>
            <template #header>
              <NInputGroup style="margin-right: 8px" @click.stop>
                <NInputGroupLabel>{{ index }}</NInputGroupLabel>
                <HostSelect v-model:value="value.from.host" />
                <NInputGroupLabel> => </NInputGroupLabel>
                <HostSelect v-model:value="value.from.host" />
              </NInputGroup>
            </template>
            <NCard size="small" embedded> 123 </NCard>
          </NCollapseItem>
        </NCollapse>
      </template>
    </NDynamicInput>
  </div>
</template>
